<template>
  <v-card>
    <v-card-title>
      {{pageTitle}}
      <v-spacer/>
      <v-btn color="primary" @click="handleSaveGoods">保存</v-btn>
    </v-card-title>
    <v-divider/>
    <v-card-text>
      <v-form>
        <v-row>
          <v-col cols="6">
            <v-text-field dense outlined label="商品名称" v-model="goodsForm.name"/>
          </v-col>
          <v-col cols="6">
            <v-select dense outlined :items="goodsCategoryList"
                      item-value="id"
                      item-text="name"
                      label="分类"
                      v-model="selectedGoodsCategory"
            ></v-select>
          </v-col>
          <v-col cols="6">
            <v-text-field type="number" dense outlined label="商品单价(单位分)" v-model="goodsForm.price"/>
          </v-col>
          <v-col cols="6"></v-col>
          <v-col cols="6">
            <v-file-input
                dense
                accept="image/*"
                label="文件上传"
                v-model="goodsForm.imageFile"
            >
              <template v-slot:append-outer>
                <v-btn color="success" @click="uploadImage">上传图片</v-btn>
              </template>
            </v-file-input>
          </v-col>
          <v-col cols="6">
            <v-avatar size="120" tile>
              <v-img :src="goodsForm.image"/>
            </v-avatar>
          </v-col>
          <v-col cols="12">
            <v-textarea outlined  label="商品描述" v-model="goodsForm.details"></v-textarea>
          </v-col>
        </v-row>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
import {insertGoods, selectGoodsById, selectGoodsCategory, updateGoodsById} from "../../http/api/goods";
import {uploadImages} from "../../http/api/upload";

export default {
  name: "EditGoods",
  data:()=>({
    pageTitle:"",
    goodsCategoryList:[],
    selectedGoodsCategory:null,
    goodsForm:{}
  }),
  computed:{
    goodsId(){
      return this.$route.query.goodsId
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      if (this.goodsId){
        this.pageTitle = '修改商品信息'
      }else {
        this.pageTitle = '新增商品信息'
      }
      selectGoodsCategory().then(res=>{
        this.goodsCategoryList = res.data
      })
      if (this.goodsId){
        selectGoodsById(this.goodsId).then(res=>{
          this.goodsForm = res.data
          this.selectedGoodsCategory = res.data.categoryId
        })
      }
    },
    uploadImage(){
      if (!this.goodsForm.imageFile){
        this.$breadstick.notify("请选择图片");
        return;
      }
      this.goodsForm.imageFile;
      let formData = new FormData();
      formData.set("file",this.goodsForm.imageFile);
      uploadImages(formData).then(res=>{
        this.goodsForm.image = res.data.url
        this.$breadstick.notify("上传成功!!")
      })
    },
    handleSaveGoods(){
      if (!this.goodsForm.name || this.goodsForm.name.trim()===''){
        this.$breadstick.notify("商品名称不能为空!");
        return;
      }
      if (!this.goodsForm.price || this.goodsForm.price<0){
        this.$breadstick.notify("请输入正确的价格!");
        return;
      }
      if (!this.selectedGoodsCategory){
        this.$breadstick.notify("请选择分类!!");
        return;
      }
      this.goodsForm.categoryId = this.selectedGoodsCategory;
      if (this.goodsId){
        updateGoodsById(this.goodsForm).then(res=>{
          this.$breadstick.notify(res.data)
          this.$router.push("/business/goods")
        })
      }else {
        insertGoods(this.goodsForm).then(res=>{
          this.$breadstick.notify(res.data)
          this.$router.push("/business/goods")
        })
      }
    }
  }
}
</script>

<style scoped>

</style>